<template>
    <view class="user-distribution-team">
        <!-- <back></back> -->
        <fixed>
            <tab
                @change="handerTabChange"
                :list="tabList"
                :activeIndex="activeIndex * 1"
                :activeColor="primaryColor"
                width="50%"
                height="100rpx"
                color="#999999"
            ></tab>
        </fixed>
        <view
            class="list-item flex-center fill-base mt-md ml-md mr-md pd-lg radius-16"
            v-for="(item, index) in list.data"
            :key="index"
        >
            <image
                mode="aspectFill"
                class="avatar radius"
                :src="activeIndex == 0 ? item.work_img : item.avatarUrl"
            ></image>
            <view class="flex-1 ml-md">
                <block v-if="activeIndex == 0">
                    <view class="f-title c-black text-bold ellipsis">
                        {{ item.coach_name }}
                    </view>
                    <view class="flex-between">
                        <view class="text flex-y-center f-desc"
                            >已接单<view class="ml-sm" :style="{ color: primaryColor }">
                                {{ item.order_count }}
                            </view>
                        </view>
                        <view class="flex-y-baseline f-desc c-black">
                            {{ item.city }}
                        </view>
                    </view>
                    <view class="f-desc c-caption mt-md"
                        >所属代理商：{{ item.admin_name || "-" }}</view
                    >
                </block>
                <view class="f-title c-black text-bold max-500 ellipsis" v-if="activeIndex == 1">
                    {{ item.nickName }}
                </view>
            </view>
        </view>
        <load-more
            :noMore="list.current_page >= list.last_page && list.data.length > 0"
            :loading="loading"
            v-if="loading"
        >
        </load-more>
        <abnor v-if="!loading && list.data.length <= 0 && list.current_page == 1"></abnor>
        <view class="space-footer"></view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    components: {},
    data() {
        return {
            options: {},
            tabList: [
                {
                    id: 1,
                    title: "邀请的" + this.$t("action.attendantName"),
                    methodModel: "partnerCoachList",
                },
                {
                    id: 2,
                    title: "邀请的用户",
                    methodModel: "myTeam",
                },
            ],
            activeIndex: 0,
            param: {
                page: 1,
            },
            list: {
                data: [],
            },
            loading: true,
            lockTap: false,
        };
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        userInfo: (state) => state.user.userInfo,
    }),
    onLoad(options) {
        this.options = options;
        this.initIndex();
    },
    onPullDownRefresh() {
        // #ifndef APP-PLUS
        uni.showNavigationBarLoading();
        // #endif
        this.initRefresh();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.list.current_page >= this.list.last_page || this.loading) return;
        this.param.page = this.param.page + 1;
        this.loading = true;
        this.getList();
    },
    methods: {
        ...mapMutations([""]),
        async initIndex(refresh = false) {
            // #ifdef H5
            if (!refresh && this.$jweixin.isWechat()) {
                await this.$jweixin.initJssdk();
                this.$jweixin.wxReady(() => {
                    this.$jweixin.hideOptionMenu();
                });
            }
            // #endif
            this.$util.setNavigationBarColor({
                bg: this.primaryColor,
            });
            await this.getList();
        },
        initRefresh() {
            this.param.page = 1;
            this.initIndex(true);
        },
        handerTabChange(index) {
            this.activeIndex = index;
            this.param.status = index;
            this.list.data = [];
            this.getList();
        },
        async getList() {
            let { list: oldList, param, tabList, activeIndex } = this;
            let { methodModel } = tabList[activeIndex];
            let newList = await this.$api.mine[methodModel](param);
            if (this.param.page == 1) {
                this.list = newList;
            } else {
                newList.data = oldList.data.concat(newList.data);
                this.list = newList;
            }
            this.loading = false;
            this.$util.hideAll();
        },
    },
};
</script>

<style lang="scss">
.user-distribution-team {
    .list-item {
        .avatar {
            width: 124rpx;
            height: 124rpx;
        }

        .text {
            color: #4d4d4d;
            margin-top: 6rpx;
        }

        .remove-btn {
            width: 146rpx;
            height: 56rpx;
            transform: rotateZ(360deg);
        }
    }
}
</style>
